<template>
	<div class="card__body-container layout-padding">
		<el-card shadow="hover" class="layout-padding-auto">
			<el-form v-show="state.showSearch" :model="state.queryParams" ref="queryFormRef" inline>
				<el-form-item label="用户昵称" prop="nickname">
					<el-input v-model="state.queryParams.nickname" placeholder="请输入用户昵称" clearable />
				</el-form-item>
				<el-form-item label="注册手机号" prop="mobile">
					<el-input v-model="state.queryParams.mobile" placeholder="请输入注册手机号" clearable @input="onVerifiyNumberIntegerMobile" />
				</el-form-item>
				<el-form-item label="排序类型" prop="sort_type">
					<el-select v-model="state.queryParams.sort_type">
						<el-option label="注册时间" value="create_time" />
						<el-option label="升级时间" value="two_upgrade_time" />
						<el-option label="已结算金额" value="settled_money" />
					</el-select>
				</el-form-item>
				<el-form-item label="排序方式" prop="sort">
					<el-select v-model="state.queryParams.sort">
						<el-option label="降序" value="desc" />
						<el-option label="升序" value="asc" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="onQuery">
						<el-icon>
							<ele-Search />
						</el-icon>
						查 询
					</el-button>
					<el-button @click="onResetQuery">
						<el-icon>
							<ele-Refresh />
						</el-icon>
						重 置
					</el-button>
				</el-form-item>
			</el-form>
			<el-table :data="state.tableList" v-loading="state.loading">
				<el-table-column label="用户ID" align="center" prop="id" />
				<el-table-column label="用户头像" align="center" prop="avatar">
					<template #default="{ row }">
						<el-avatar :src="row.avatar" shape="square" />
					</template>
				</el-table-column>
				<el-table-column label="用户昵称" align="center" prop="nickname" />
				<el-table-column label="用户注册手机号" align="center" prop="mobile" />
				<el-table-column label="用户来源" align="center" prop="regist_from" :formatter="formatterRegistFrom" />
				<el-table-column label="邀请人" align="center" prop="invite_name" />
				<el-table-column label="邀请人ID" align="center" prop="invite_id" />
				<el-table-column label="注册时间" align="center" prop="regist_time" :formatter="formatterRegistTime" />
				<el-table-column label="升级时间" align="center" prop="two_upgrade_time" :formatter="formatterTwoUpgradeTime" />
				<el-table-column label="邀请码" align="center" prop="invite_code" />
				<el-table-column label="升级方式" align="center" prop="two_upgrade_type" :formatter="formatterTwoUpgradeType" />
				<el-table-column label="直属银牌会员人数" align="center" prop="one_num" />
				<el-table-column label="银牌总人数" align="center" prop="all_num" />
				<el-table-column label="操作" align="center" prop="operation" fixed="right">
					<template #default="{ row }">
						<el-popconfirm v-if="isUpgrade(row)" title="您确定升级该用户为金牌牌会员吗？此操作不可撤回" @confirm="onUpgrade(row)" width="200px">
							<template #reference>
								<el-button type="primary" link> 升级金牌会员 </el-button>
							</template>
						</el-popconfirm>
						<el-button type="primary" link @click="onViewIncome(row)">我的收入</el-button>
						<el-button type="primary" link @click="onViewMyTeam(row)">我的团队</el-button>
					</template>
				</el-table-column>
			</el-table>
			<PaginationComponent
				v-if="state.total"
				:total="state.total"
				v-model:page="state.queryParams.pageNum"
				v-model:limit="state.queryParams.pageSize"
				@pagination="getList"
			/>
		</el-card>
		<IncomeDetailDialog ref="incomeDetailDialogRef" />
		<MyTeamDialog ref="myTeamDialogRef" />
	</div>
</template>

<script setup lang="ts" name="silverMember">
import { ElMessage } from 'element-plus';
import { defineAsyncComponent, onMounted, reactive, ref } from 'vue';
import { systemApi, usersApi } from '/@/api';
import { timeDictionary } from '/@/utils/dictionary';
import { verifiyNumberInteger1 } from '/@/utils/toolsValidate';

const IncomeDetailDialog = defineAsyncComponent(() => import('../dialog/incomeDetailDialog.vue'));
const MyTeamDialog = defineAsyncComponent(() => import('../dialog/myTeamDialog.vue'));

const UsersApi = usersApi();
const SystemApi = systemApi();
// 定义变量内容
const state = reactive({
	showSearch: true,
	queryParams: {
		nickname: '',
		mobile: '',
		identity: '2',
		sort_type: 'create_time',
		sort: 'desc',
		pageNum: 1,
		pageSize: 10,
	},
	tableList: [],
	loading: false,
	total: 0,
	upgradeForm: {
		recommend_num: 0,
		all_num: 0,
	},
});
const queryFormRef = ref();
const incomeDetailDialogRef = ref();
const myTeamDialogRef = ref();

onMounted(() => {
	_configSystemSelect({ identification: 'upgrade_config' });
	getList();
});

/********** 触发事件 **********/
// 注册手机号过滤
const onVerifiyNumberIntegerMobile = (val: string) => {
	state.queryParams.mobile = verifiyNumberInteger1(val);
};
// 查询
const onQuery = () => {
	state.queryParams.pageNum = 1;
	getList();
};
// 重置查询
const onResetQuery = () => {
	queryFormRef.value.resetFields();
	onQuery();
};
// 升级金牌会员
const onUpgrade = (row: any) => {
	_usersUpgradeThree({ user_id: row.id });
};
// 查看收入
const onViewIncome = (row: any) => {
	incomeDetailDialogRef.value.openDialog(row);
};
// 查看我的团队
const onViewMyTeam = (row: any) => {
	myTeamDialogRef.value.openDialog(row);
};


/********** 方法事件 **********/
// 刷新列表
const getList = () => {
	state.loading = true;
	_usersList(state.queryParams);
};
// 用户来源字典
const formatterRegistFrom = (row: any) => {
	return row.regist_from === 1 ? '用户注册' : 'APP同步';
};
// 注册时间字典
const formatterRegistTime = (row: any) => {
	return timeDictionary(row.regist_time);
};
// 升级时间字典
const formatterTwoUpgradeTime = (row: any) => {
	return timeDictionary(row.two_upgrade_time);
};
// 升级方式字典
const formatterTwoUpgradeType = (row: any) => {
	return row.two_upgrade_type === 1 ? '手动升级' : '购买礼包升级';
};
// 是否升级金牌会员
const isUpgrade = (row: any) => {
	if (Number(row.one_num) >= Number(state.upgradeForm.recommend_num) && Number(row.all_num) >= Number(state.upgradeForm.all_num)) {
		return true;
	} else {
		return false;
	}
};

/********** 网络事件 **********/
// 用户列表
const _usersList = (params: Object) => {
	UsersApi.usersList(params)
		.then((res) => {
			state.tableList = res.data.list;
			state.total = res.data.info.total;
			state.loading = false;
		})
		.catch(() => (state.loading = false));
};
// 银牌会员升级为金牌会员
const _usersUpgradeThree = (params: Object) => {
	UsersApi.usersUpgradeThree(params).then(() => {
		ElMessage.success('操作成功！');
		getList();
	});
};
// 单个系统配置信息
const _configSystemSelect = (params: any) => {
	SystemApi.configSystemSelect(params).then((res) => {
		const info = res.data.info;
		if (!Object.keys(info).length) return;
		const list = info.item.list;
		state.upgradeForm = list.two_to_three;
	});
};
</script>
